import React, { Component } from 'react'
import { Editor } from '@tinymce/tinymce-react'

// 展示商品详情的富文本编辑器
export default class RichTextEditor extends Component {

    state  = {
        initialValue: ''
    }

    handleEditorChange = (content, editor) => {
        this.detail = content.level.content
    }

    // 父组件调用获取富文本编辑器的值
    getDetail = () => {
        return this.detail
    }

    // 修改状态下给富文本编辑器设置初始值
    componentDidMount () {
        this.setState({initialValue: this.props.detail})
    }
      
    render() {

        return (
            <Editor
                initialValue={this.state.initialValue}
                init={{
                height: 300,
                menubar: false,
                plugins: [
                    'advlist autolink lists link image', 
                    'charmap print preview anchor help',
                    'searchreplace visualblocks code',
                    'insertdatetime media table paste wordcount'
                ],
                toolbar:
                    'undo redo | formatselect | bold italic | \
                    alignleft aligncenter alignright | \
                    bullist numlist outdent indent | help'
                }}
                onChange={this.handleEditorChange}/>
        )
    }
}
